
/* demo
------------------------- */

#image-container {
  border-radius: 10px;
  background: white;
  padding: 10px;
  min-height: 165px;
}

/* clear fix */
#image-container:after {
  content: '';
  display: block;
  clear: both;
}

#image-container img {
  max-height: 140px;
  border-radius: 5px;
}

#image-container li {
  height: 140px;
  min-width: 100px;
  display: block;
  float: left;
  list-style: none;
  margin: 0 5px 5px 0;
  background-color: black;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 5px;
}

#image-container li img,
#status {
  -webkit-transition: opacity 0.4s;
     -moz-transition: opacity 0.4s;
      -ms-transition: opacity 0.4s;
          transition: opacity 0.4s;
}

#image-container li.is-loading {
  background-color: #F0F0F0;
  background-image: url('loading.gif');
}

#image-container  li.is-broken {
  background-image: url('broken.png');
  background-color: #be3730;
  width: 120px;
}

#image-container li.is-loading img,
#image-container li.is-broken img {
  opacity: 0;
}

#demo button {
  font-size: 18px;
  padding: 10px 20px;;
  border-radius: 8px;
  color: white;
  background-color: #888;
  border: none;
  background-image: -webkit-linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.3) );
  background-image:         linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.3) );
}

#demo #add { background-color: #88F; }
#demo #add:hover { background-color: #AAF; }

#demo #reset { background-color: #333; }
#demo #reset:hover { background-color: #555; }

#demo button:active {
  box-shadow: inset 0 2px 14px hsla(0, 0%, 0%, 0.8);
}

#status {
  opacity: 0;
  color: white;
  background: hsla( 0, 0%, 0%, 0.1);
  padding: 5px;
  border-radius: 10px;
  z-index: 2; /* over other stuff */
  width: 150px;
}

#status progress { font-size: 28px; 
 width: 130px;
 text-align: right;;
}

/* syntax highlighting
------------------------- */

code .string,
code .tag .value { color: #2D4; }
code .number, /* integer */
code .cp, /* doctype */
code .literal { color: #78F; } /*boolean*/
code .keyword { color: #F84; } /* keyword */
code .kd, /* storage */
code .attribute { color: #A61; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .comment { color: #876; font-style: italic; }

code .tag { color: #37B; } /* Markup open tag */

code .id { color: #567; } /* css id */
code .class { color: #A63; }  /* CSS class */
code .rules { color: #431; }
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */
code .hexcolor { color: #F63; }
code .at_rule { color: #088; }



/* tablet and desktop */
@media screen and (min-width: 830px) {

  h1 {
    font-size: 70px;
    line-height: 1.2;
    margin-bottom: 0.3em;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 22px;
  }

  #content {
    padding: 0 0 6.0em;
  }

  #content > * {
    padding-left: 100px;
    max-width: 820px;
  }

  #content > h2 {
    max-width: none;
  }

  #content > pre {
    padding-left: 1.0em;
    margin-left: 100px;
    max-width: 720px;
  }

  #content > ul {
    padding-left: 126px;
  }

  #content > #demo {
    padding-right: 1.0em;
    max-width: none;
  }

   #fork-me {
     overflow: hidden;
     width: 270px;
     height: 200px;
   }

  #fork-me a {
    display: block;
    padding: 5px;
    text-align: center;
    -webkit-transform-origin: 50px top;
       -moz-transform-origin: 50px top;
        -ms-transform-origin: 50px top;
         -o-transform-origin: 50px top;
            transform-origin: 50px top;
    -webkit-transform: translateX(100px) rotate(45deg);
       -moz-transform: translateX(100px) rotate(45deg);
        -ms-transform: translateX(100px) rotate(45deg);
         -o-transform: translateX(100px) rotate(45deg);
            transform: translateX(100px) rotate(45deg);
  }

}
